<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 渲染部分在 /styles/mainStyle.css 里面 -->
    <link rel="stylesheet" type="text/css" href="../styles/simulationStyle.css"/>
    <title>EasyNet 可视化BP神经网络平台</title>
</head>

<body>

<div class="head-title">
    You Can Start Your BP Network Simulation Here ~
</div>

<div class="configuration">
    <form class="main-control" th:action="@{simulation}" method="post">
        <div class="start-end-control">
            <input type="submit" class="submit-control restart" name="action" id="restart" value="restart">
            <input type="submit" class="submit-control play" name="action" id="play" value="play">
        </div>
        <div class="param-control">
            <div class="control-item learning-rate-div">
                <span>Learning rate</span>
                <input
                        type="text"
                        class="learning-rate-input"
                        onblur="onblur"
                        placeholder="0.05"
                        name="learningRate"
                >
            </div>
            <div class="control-item activation">
                <span>Activation</span>
                <select class="activation-select">
                    <option>tanh</option>
                    <option>待开发</option>
                </select>
            </div>
            <div class="control-item except-precision">
                <span>Exception precision</span>
                <input
                        type="text"
                        class="except-precision-input"
                        onblur="onblur"
                        placeholder="0.05"
                        name="exceptPrecision"
                >
            </div>
            <div class="control-item max-iterations">
                <span>Max iterations</span>
                <input
                        type="text"
                        class="max-iterations"
                        onblur="onblur"
                        placeholder="50000"
                        name="maxIterations"
                >
            </div>
        </div>
    </form>
</div>

<div class="main-simulation">
    <div class="data-control">
        <div class="data-table">
            <div class="data-table-title">
                Data Table
            </div>
            <div class="data-table-main">
                <div class="data-table-item data-sample">
                    <label class="data-table-label sample-title" th:if="${not #strings.isEmpty(sample)}">sample</label>
                    <span class="data-table-span sample-span"
                          th:text="${sample}"
                          th:if="${not #strings.isEmpty(sample)}"
                          th:utext="${#strings.unescapeJava(#strings.replace(#strings.escapeJava(sample),'\n','&lt;br/&gt;'))}"
                    ></span>
                </div>
                <div class="data-table-item data-except">
                    <label class="data-table-label except-title" th:if="${not #strings.isEmpty(except)}">except</label>
                    <span class="data-table-span except-span"
                          th:text="${except}"
                          th:if="${not #strings.isEmpty(except)}"
                          th:utext="${#strings.unescapeJava(#strings.replace(#strings.escapeJava(except),'\n','&lt;br/&gt;'))}"
                    ></span>
                </div>
            </div>
        </div>
        <div class="data-choose">
            <div class="data-choose-title">
                Data
            </div>
            <div class="data-choose-main">
                <form class="choose-data-source">
                    <input type="file"
                           class="choose-my-data"
                           id="choose-my-data"
                           name="choose-my-data"
                           value="Browse local data file"
                    >
                    <div class="text" id="text"></div>
                </form>
                <div class="my-data-here" id="upload-my-data">
                    文件拖拽到此处
                </div>
                <script type="text/javascript" src="../js/uploadMyFile.js"></script>
                <div class="choose-data-tip">
                    注：若没有选择数据文件将使用系统的默认数据哦
                </div>
            </div>
        </div>
    </div>
    <div class="bp-network">
        <div class="simulation">
            <div class="simulation-title">
                Simulation
            </div>
            <div class="simulation-item-title">
                <div class="layer-title input-layer-title">
                    Input
                    <div class="button-item">
                        <button class="input-layer-add"></button>
                        <button class="input-layer-minus"></button>
                    </div>
                </div>
                <div class="layer-title hide-layer-title">
                    Hider
                    <div class="button-item">
                        <button class="hide-layer-add"></button>
                        <button class="hide-layer-minus"></button>
                    </div>
                </div>
                <div class="layer-title output-layer-title">
                    Output
                    <div class="button-item">
                        <button class="output-layer-add"></button>
                        <button class="output-layer-minus"></button>
                    </div>
                </div>
            </div>
            <div class="simulation-vector">
                <div class="layer-vector input-layer-vector" id="input-layer-vector">
                    <div class="I I-1" id="I1"></div>
                    <div class="I I-2" id="I2"></div>
                    <div class="I I-3" id="I3"></div>
                </div>
                <div class="layer-vector hide-layer-vector" id="hide-layer-vector">
                    <div class="H H-1" id="H1"></div>
                    <div class="H H-2" id="H2"></div>
                    <div class="H H-3" id="H3"></div>
                    <div class="H H-4" id="H4"></div>
                </div>
                <div class="layer-vector output-layer-vector" id="output-layer-vector">
                    <div class="O O-1" id="O1"></div>
                    <div class="O O-2" id="O2"></div>
                </div>
                <svg class="connect-node" id="svg" width="365px">
                    <!-- 此处绘制神经网络结点连线，开发中... -->
                    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
                    <script type="text/javascript" src="../js/connectNode.js">
                        connect();
                    </script>
                </svg>
            </div>
        </div>
        <div class="details">
            <div class="details-title">
                Details
            </div>
            <div class="details-main">
                <div class="details-item epoch">
                    <label class="details-label epoch-label">Epoch:</label>
                    <span class="details-span epoch-span" th:text="${Epoch}" th:if="${not #strings.isEmpty(Epoch)}"></span>
                </div>
                <div class="details-item weight-ih">
                    <label class="details-label weight-ih-label">WeightIH:</label>
                    <span class="details-span weight-ih-span"
                          th:text="${WeightIH}"
                          th:if="${not #strings.isEmpty(WeightIH)}"
                          th:utext="${#strings.unescapeJava(#strings.replace(#strings.escapeJava(WeightIH),'\n','&lt;br/&gt;'))}"
                    ></span>
                </div>
                <div class="details-item weight-ho">
                    <label class="details-label weight-ho-label">WeightHO:</label>
                    <span class="details-span weight-ho-span"
                          th:text="${WeightHO}"
                          th:if="${not #strings.isEmpty(WeightHO)}"
                          th:utext="${#strings.unescapeJava(#strings.replace(#strings.escapeJava(WeightHO),'\n','&lt;br/&gt;'))}"
                    ></span>
                </div>
            </div>
        </div>
        <div class="prediction">
            <div class="prediction-title">
                Prediction
            </div>
        </div>
    </div>
</div>
</body>

</html>